
/*
    动态路由格式
        动态参数都是以:标记，当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用
        $route.query表示URL查询参数  /foo?user=1   $route.query.user=1

  
    匹配优先级
        同一个路径可以匹配多个路由，此时，匹配先定义的
*/


const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}


const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})



/*
    响应路由参数的变化
        当使用路由参数时，例如从/user/foo 导航到 /user/bar， 原来的组件实例会被复用，这意味着组件的生命周期钩子不会再被调用
        复用组件时，想对路由参数的变化作出响应的话，可以简单地watch(监测变化)$route对象，或者使用 beforeRouteUpdate 组件内导航守卫

*/

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}


const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}




/*
    通配符路由
        使用通配符路由时，请确保路由的顺序是正确的，含有通配符的路由应该放在最后
        当使用一个通配符时，$route.params内会自动添加一个名为pathMath参数，它包含URL通过通配符被匹配的部分

*/


{
  // 会匹配所有路径， 通常用于客户端404错误
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'